import SigninTypeLess from "./signIn.module.less";
import { useSelector } from "react-redux";
import * as Icon from "@ant-design/icons";
import React, { useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";

function SignIn() {
  const navigate = useNavigate();
  const HeaderImg = useSelector((state: any) => state.user.HeaderImg);
  const [TagId, setTagId] = useState(1);
  const tagList = [
    {
      id: 1,
      icon: "ScheduleFilled",
      name: "每日签到",
      url: "signInTime",
    },
    {
      id: 2,
      icon: "SignalFilled",
      name: "成长等级",
      url: "signInTime",
    },
    {
      id: 3,
      icon: "GiftFilled",
      name: "幸运抽奖",
      url: "signInTime",
    },
    {
      id: 4,
      icon: "GoldFilled",
      name: "福利兑换",
      url: "welfare",
    },
    {
      id: 5,
      icon: "RedEnvelopeFilled",
      name: "Bug挑战赛",
      url: "signInTime",
    },
    {
      id: 6,
      icon: "GoldenFilled",
      name: "我的收获",
      url: "signInTime",
    },
  ];
  const iconToElement = (name: string) =>
    React.createElement(Icon && (Icon as any)[name], {
      style: { fontSize: "17px" },
    });

  const selectTag = (item: any) => {
    setTagId(() => item.id);
    navigate("/signIn/" + item.url);
  };
  return (
    <>
      <div className={SigninTypeLess.signin_content}>
        <div className="left_content">
          <div className="top_Info">
            <div className="img">
              <img src={HeaderImg} alt="头像" />
            </div>
            <div className="info">
              <div className="name">臣不知代码</div>
              <div className="grade">
                <img src="../../../public/icon/grade.avis" alt="" />
              </div>
            </div>
          </div>
          <div className="li_content">
            {tagList.map((item, index) => {
              return (
                <div
                  className={[
                    TagId === item.id ? "selectItems_active" : "",
                    "selectItems",
                  ].join(" ")}
                  key={index}
                  onClick={() => selectTag(item)}
                >
                  <div className="icon">{iconToElement(item.icon)}</div>
                  <div className="selectName">{item.name}</div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="right_signin_content">
          <Outlet />
        </div>
      </div>
    </>
  );
}

export default SignIn;
